var app = new Vue({
	el:"#app",
	data:function() {
		return {
			title:"Hello Vue",
			tableData:null,
			currentPage:1,
			pageSize:20,
			total:0,
			tableHeight:(document.documentElement.clientHeight-110),
			contextPath:"",
			showList:true,
			dialogTableVisible:false,
			dialogTitle:'新增',
			fields:[
								{
					prop:"id",
					label:"主键"
				},
				{
					prop:"name",
					label:"名称"
				},
				{
					prop:"remark",
					label:"描述"
				},
			],
			form: {
				id:'',
				name:'',
				remark:'',
	        },
	        multipleSelection:[]
		}
	},
	methods:{
		handleCurrentChange:function(val) {
			this.currentPage = val;
			this.getList();
		},
		handleSizeChange:function(val) {
			this.pageSize = val;
			this.getList();
		},
		//新增数据
		addForm:function() {
			//显示弹出框
			this.dialogTableVisible = true;
			this.dialogTitle = "新增";
			this.form = {
				id:'',
				name:'',
				remark:'',
			};
		},
		//删除多条列表项
		deleteItems:function() {
			if (this.multipleSelection.length == 0) {
				this.$alert("至少选择一条记录", "提示",{
					type:"warning"
				});
			} else {
				let that = this;
				this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					let ids = [];
					that.multipleSelection.forEach(function(item,index){
						ids.push(item.id);
					});
					axios.put(that.contextPath + "/sys/role/batchDelete",{
						ids:JSON.stringify(ids)
					}).then(function(){
						that.$message({
							type: 'success',
							message: '删除成功',
							duration:'1000'
						});
					that.getList();
					}).catch(function(){
						that.$message({
							type: 'waring',
							message: '删除失败',
							duration:'1000'
						});
					});
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除',
		            duration:'1000'
		          });          
		        });
			}
		},
		//编辑数据
		editItem:function(row) {
			//显示弹出框
			this.dialogTableVisible = true;
			this.dialogTitle = "编辑";
			this.form = {
				id:row.id,
				name:row.name,
				remark:row.remark,
			};
		},
		//删除单条列表项
		deleteItem:function(id) {
			let that = this;
			this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					axios.post(this.contextPath + "/sys/role/delete",{
						"id":id
					}).then(function(response){
						that.$message({
							type: 'success',
							message: '删除成功!',
							duration:'1000'
						});
						that.getList();
					}).catch(function(){
						that.$message({
							type: 'warning',
							message: '删除失败，请重试',
							duration:'1000'
						});
					});
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除',
		            duration:'1000'
		          });          
		        });
		},
		//保存表单数据
		onSubmit:function() {
			let that = this;
			axios.post(this.contextPath + "/sys/role/save",this.form)
				.then(function(){
					that.$message({
					type: 'success',
					message: '保存成功!',
					duration:'1000'
				});
				that.dialogTableVisible = false;
				that.getList();
				})
				.catch(function(){
					that.$message({
						type: 'warning',
						message: '保存失败!',
						duration:'1000'
					});
				});
		},
		//表单取消提交操作
		cancelForm:function() {
			this.dialogTableVisible = false;
		},
		//列表选中行发生改变时
		handleSelectionChange:function(val) {
			this.multipleSelection = val;
		},
		//根据当前页和大小获得分页列表数据
		getList:function() {
			let that = this;
			axios.get(this.contextPath + "/sys/role/list/" + this.currentPage + "/" + this.pageSize)
				.then(function(response){
					that.total = response.data.total;
					that.tableData = response.data.records;
				})
				.catch(function(response){
				});
		}
	},
	mounted:function() {
		this.contextPath = this.$refs.contextPath.value;
		this.getList();
	}
});
